<template>
  <div class="content">
    <!-- 时间 -->
    <div class="x-time">
      <div class="x-t">{{ deteTime.hour[0] || "0" }}</div>
      <div class="x-t">{{ deteTime.hour[1] || "0" }}</div>
      <div class="x-l">:</div>
      <div class="x-t">{{ deteTime.minute[0] || "0" }}</div>
      <div class="x-t">{{ deteTime.minute[1] || "0" }}</div>
    </div>
    <!-- 日期 -->
    <div class="x-dete">
      {{ deteTime.month }}月{{ deteTime.date }}日 星期{{ dayStr }}
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import dayjs from "dayjs";

export default defineComponent({
  name: "DeteTimeWeekCom",
  props: {},
  data() {
    return {
      deteTime: {
        minute: "",
        hour: "",
        year: "",
        month: "",
        date: "",
        day: "",
      },
      dayFormat: ["日", "一", "二", "三", "四", "五", "六"],
      timer: -1,
    };
  },
  created() {
    //处理时间
    this.deteTimeHadnler();
    let timer = setInterval(() => {
      this.deteTimeHadnler();
    }, 1000);
    this.timer = timer;
  },
  beforeUnmount() {
    console.log("beforeUnmount");
    if (this.timer < 0) {
      return;
    }
    clearInterval(this.timer);
    this.timer = -1;
  },
  computed: {
    //格式星期
    dayStr(): string {
      let day = this.deteTime.day;
      if (!day) {
        return "";
      }
      let i = parseInt(day);
      let s = this.dayFormat[i];
      return s;
    },
  },

  methods: {
    //时间处理
    deteTimeHadnler() {
      let dete = dayjs();
      let deteTime = {
        minute: dete.format("mm"), //分钟
        hour: dete.format("HH"), // 小时
        year: dete.format("YYYY"), // 年
        month: (dete.month() + 1).toString(), // 月 0到11
        date: dete.format("DD"), // 日期
        day: dete.day().toString(), // 星期
      };
      this.deteTime = deteTime;
    },
  },
});
</script>

<style scoped lang="less">
.content {
  .x-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    font-size: 60px;
    font-weight: bold;

    .x-t {
      background-color: #333333;
      color: white;
      margin: 0px 2px;
      width: 45px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      box-shadow: 0px 1px 6px 1px rgba(32, 33, 36, 0.6);
    }

    .x-l {
      color: #333333;
    }
  }

  .x-dete {
    text-align: center;
    font-size: 18px;
    color: white;
  }
}
</style>
